<template>
  <div class="project_detail">
    <div class="left">
      <!-- 基本信息 -->
      <module-border class="basicInfo" title="基本信息">
        <div class="content">
          <module-border2
            class="xiangMuGaiKuang"
            title="项目概况"
            title-color="#ffff00"
          >
            <!-- 项目名称 -->
            <div class="row">
              <span class="name">项目名称：</span>
              <span class="value">{{ valueFormat(base_info.项目名称) }}</span>
            </div>
            <!-- 赋码 -->
            <div class="row">
              <span class="name">赋码：</span>
              <span class="value">{{ valueFormat(base_info.赋码) }}</span>
            </div>
            <!-- 项目分类 -->
            <div class="row">
              <span class="name">项目分类：</span>
              <span class="value">{{ valueFormat(base_info.项目分类) }}</span>
            </div>
            <!-- 项目标签 -->
            <div class="row">
              <span class="name">项目标签：</span>
              <span class="value">{{ valueFormat(base_info.项目标签) }}</span>
            </div>
            <!-- 结构性指标 -->
            <div class="row">
              <span class="name">结构性指标：</span>
              <span class="value">{{ valueFormat(base_info.结构性指标) }}</span>
            </div>
            <!-- 建设性质 -->
            <div class="row" style="">
              <span class="name">建设性质：</span>
              <span class="value">{{ valueFormat(base_info.建设性质) }}</span>
            </div>
            <!-- 建设地址 -->
            <div class="row">
              <span class="name">建设地址：</span>
              <span class="value">{{ valueFormat(base_info.建设地址) }}</span>
            </div>
            <!-- 总投资 -->
            <div class="row">
              <span class="name">总投资：</span>
              <span class="value"
                >{{ valueFormat(base_info.总投资) }}(万元)</span
              >
            </div>
            <!-- 总用地 -->
            <div class="row">
              <span class="name">总用地：</span>
              <span class="value">{{ valueFormat(base_info.总用地) }}(亩)</span>
            </div>
            <!-- 项目计划时间 -->
            <div class="row">
              <span class="name">项目计划时间：</span>
              <span class="value">{{ valueFormat(base_info.计划工期) }}</span>
            </div>
            <div class="row_flex">
              <!-- 实际开工时间 -->
              <div class="row">
                <span class="name">实际开工时间：</span>
                <span class="value">{{
                  valueFormat(base_info.实际开工时间)
                }}</span>
              </div>
              <!-- 实际完工时间 -->
              <div class="row">
                <span class="name">实际完工时间：</span>
                <span class="value">{{
                  valueFormat(base_info.实际完工时间)
                }}</span>
              </div>
            </div>
            <div class="each">
              <div class="row">
                <span class="name">责任单位：</span>
                <span class="value">{{ valueFormat(base_info.责任单位) }}</span>
              </div>
              <div class="row">
                <span class="name">建设单位：</span>
                <span class="value">{{ valueFormat(base_info.建设单位) }}</span>
              </div>
              <div class="row">
                <span class="name">联系人：</span>
                <span class="value">{{ valueFormat(base_info.联系人) }}</span>
              </div>
            </div>
          </module-border2>
        </div>
      </module-border>
    </div>
    <div class="center">
      <!-- 项目名称 -->
      <div class="projectName">
        <div class="title">
          <i class="left"></i>
          <span class="name">{{ base_info.项目名称 }}</span>
          <i class="left right"></i>
        </div>
        <div class="content">
          <div class="each">
            <div class="value">
              {{ base_info.本年计划投资 }}<span class="unit"> /万元</span>
            </div>
            <span class="name">本年度计划投资</span>
          </div>
          <div class="each">
            <div class="value">
              {{ progress.本年累计完成投资 }}<span class="unit"> /万元</span>
            </div>
            <span class="name">本年累计完成投资</span>
          </div>
          <div class="each">
            <div id="tzwcl_chart"></div>
            <span class="chartname">本年度投资完成率</span>
          </div>
        </div>
      </div>
      <!-- 中间方框 -->
      <div class="centerBox">
        <div class="center2">
          <div
            class="each"
            :class="{ each2: item.date }"
            v-for="(item, i) in progerss_node"
            :key="i"
          >
            <span>{{ item.name }}</span>
            <i :class="item.icon"></i>
            <i v-if="item.date" class="el-icon-success"></i>
            <span class="completeDate">{{ item.date }}</span>
          </div>
        </div>
      </div>
      <!-- 中间折线图 -->
      <module-border2
        class="yearInvestComplete"
        :title="progress.年份 + '年度投资额完成情况（万元）'"
        title-color="#ffff00"
      >
        <div id="yic_chart"></div>
      </module-border2>
    </div>
    <div class="right">
      <!-- 其他信息 -->
      <module-border class="otherInfo" title="其他信息">
        <div class="content">
          <module-border2
            class="dangyuejihua"
            title="当月计划"
            title-color="#ffff00"
          >
            <div class="cont">
              <div class="bottom">
                <span>当月计划投资：</span>
                <span>{{ progress.当月计划投资 }}(万元)</span>
              </div>
              <div class="bottom">
                <span>当月计划进度：</span>
                <span>{{ progress.当月计划进度 }}</span>
              </div>
            </div>
          </module-border2>
          <module-border2
            class="xingXiangJinDu"
            title="形象进度"
            title-color="#ffff00"
          >
            <div class="cont">
              <div class="top">
                <div class="row">
                  <span class="name">项目进度：</span>
                  <span
                    class="value"
                    :style="{ color: colorFormat(progress.进度状态, 'white') }"
                    >{{ progress.进度状态 }}</span
                  >
                </div>
                <div style="flex: 1; text-align: right; color: #ffff00">
                  {{ progress.年份 }}年{{ progress.月份 }}月
                </div>
              </div>
              <div class="bottom">
                <span>当月完成投资：</span>
                <span>{{ progress.当月完成投资 }}(万元)</span>
              </div>
              <div class="bottom">
                <span>本年累计完成投资：</span>
                <span>{{ progress.本年累计完成投资 }}(万元)</span>
              </div>
              <div class="bottom">
                <span>开工累计完成投资：</span>
                <span>{{ progress.开工累计完成投资 }}(万元)</span>
              </div>
              <div class="bottom">
                <span>形象进度：</span>
                <span>{{ progress.形象进度 }}</span>
              </div>
              <el-carousel
                v-if="progress.img_list?.length"
                trigger="click"
                height="200px"
              >
                <el-carousel-item v-for="item in progress.img_list" :key="item">
                  <img :src="setting.baseURL + '/Annex/Photo/' + item" alt="" />
                </el-carousel-item>
              </el-carousel>
              <img v-else src="../../../public/img/🐛🐛🐛.png" alt="" />
            </div>
          </module-border2>
          <module-border2
            class="yujingqingkuang"
            title="预警情况"
            title-color="#ffff00"
          >
            <div class="yjqk">
              <div class="title">预警情况</div>
              <div class="cont">
                <div class="each">
                  <div class="title">预警类型</div>
                  <div class="value">
                    <span>{{ valueFormat(progress.预警级别) }}</span>
                    <!--                                        <i v-if="base_info.lamptype" class="icon-yujing1" :style="{color:colorFormat(base_info.lamp)}"></i>-->
                  </div>
                </div>
                <div class="each">
                  <div class="title">预警原因</div>
                  <div class="value">{{ valueFormat(progress.预警原因) }}</div>
                </div>
              </div>
            </div>
          </module-border2>
        </div>
      </module-border>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import moduleBorder from '@/components/moduleBorder.vue';
import moduleBorder2 from '@/components/moduleBorder2.vue';
import { getProjectDetail } from '@/api/home.js';
import utils from '@/utils/utils';
import setting from '@/utils/setting';

onMounted(() => {
  getData();
});
const route = useRoute();
//形象进度节点
const progerss_node = ref([]);
const base_info = ref({});
//形象进度
const progress = ref({});
function getData() {
  getProjectDetail({ id: route.query.id }).then((data) => {
    data = data.data;
    let _base_info = data['基本信息'][0];
    base_info.value = _base_info;
    progerss_node.value = [
      {
        name: '前期',
        date: _base_info.项目前期时间,
        icon: 'icon-chanyeyuanqu'
      },
      {
        name: '开工',
        date: _base_info.实际开工时间,
        icon: 'icon-huanjingguang'
      },
      {
        name: '入库',
        date: _base_info.项目入库时间,
        icon: 'icon-jichufuwupingtai'
      },
      { name: '完工', date: _base_info.项目完工时间, icon: 'icon-huaban' }
    ];
    progress.value = {
      ...data['当前进度'][0],
      src:
        data['当前进度'][0].照片路径 &&
        data['当前进度'][0].照片路径.substring(1),
      img_list: data['当前进度'][0].照片路径
        .split('|')
        .filter((item) => item && item)
    };
    tcwclChart();
    let [acl_data, plan_data, xAxis] = [[], [], []];
    data['各月投资'].forEach((item) => {
      acl_data.push(item.本月实际投资);
      plan_data.push(item.本月计划投资);
      xAxis.push(item.月份 + '月');
    });
    yicChart(acl_data, plan_data, xAxis);
  });
}
//本年度投资完成率
function tcwclChart() {
  let options = {
    series: {
      type: 'gauge',
      center: ['50%', '45%'],
      radius: '90%',
      startAngle: 180,
      endAngle: 0,
      splitNumber: 8,
      axisLine: {
        lineStyle: {
          width: 4,
          color: [
            [0.25, '#FF6E76'],
            [0.5, '#FDDD60'],
            [0.75, '#58D9F9'],
            [1, '#7CFFB2']
          ]
        }
      },
      pointer: {
        icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
        length: '40%',
        width: 4,
        offsetCenter: [0, '-60%'],
        itemStyle: {
          color: 'inherit'
        }
      },
      axisTick: {
        length: 4,
        distance: 1, //与轴线的距离
        lineStyle: {
          color: 'auto',
          width: 1
        }
      },
      splitLine: {
        length: 6,
        distance: 1,
        lineStyle: {
          color: 'auto',
          width: 1
        }
      },
      axisLabel: {
        color: 'auto',
        fontSize: '.12rem',
        formatter: function (value) {
          if (value % 25 === 0) {
            return value + '%';
          }
          return '';
        }
      },
      title: { show: false },
      detail: {
        fontSize: '.2rem',
        offsetCenter: [0, '10%'],
        color: 'auto'
      },
      data: [progress.value.年度计划完成率]
    }
  };
  utils.publicInitChart('tzwcl_chart', options);
}
//年度投资额完成情况
function yicChart(acl_data, plan_data, xAxis) {
  let options = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      top: '5%',
      data: ['月计划投资额', '累计实际完成投资'],
      textStyle: { color: 'white' }
    },
    grid: {
      top: '15%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: xAxis,
      axisLine: { show: false, lineStyle: { color: 'white' } }, //坐标轴线
      splitLine: { show: true, lineStyle: { color: '#0e2463' } }, //坐标轴在 grid 区域中的分隔线。
      axisTick: { show: false }
    },
    yAxis: {
      type: 'value',
      name: '万元',
      splitLine: { lineStyle: { color: '#0e2463' } }, //坐标轴在 grid 区域中的分隔线。
      axisLine: { show: false, lineStyle: { color: 'white' } }, //坐标轴线
      axisTick: { show: false }
    },
    series: [
      {
        name: '月计划投资额',
        type: 'bar',
        barWidth: 15,
        label: {
          show: true,
          color: '#00DDFF',
          position: 'top'
        },
        itemStyle: {
          opacity: 10,
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#00DDFF' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#0e2463' // 100% 处的颜色
              }
            ]
          }
        },
        data: plan_data
      },
      {
        name: '累计实际完成投资',
        type: 'line',
        smooth: true,
        symbolSize: 10, // 拐点圆的大小
        label: {
          show: true,
          color: 'inherit',
          offset: [15, 5]
        },
        itemStyle: { color: '#ef0b74' },
        lineStyle: { width: 3 },
        data: acl_data
      }
    ]
  };
  utils.publicInitChart('yic_chart', options);
}
function valueFormat(value, type) {
  return value ? (type === 'number' ? +value : value) : '/';
}
function colorFormat() {
  //value,c='3396fb'
  // let color = {
  //     '黄色': '#f5ff29',
  //     '橙色': '#fca61b',
  //     '红色': '#ff3333',
  //     '': c,
  // };
  // return color[value];
  return 'white';
}
</script>

<style scoped lang="less">
.project_detail {
  height: 100%;
  position: relative;
  display: flex;
  justify-content: space-around;
  padding: 12px 0 12px 0;
  box-sizing: border-box;
  > .left {
    width: 450px;
    height: 100%;
    > .basicInfo {
      height: 100%;
      .content {
        height: calc(100% - 40px);
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        .xiangMuGaiKuang {
          font-size: 16px;
          //height: 470px;
          height: calc(100% - 80px);
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          .row {
            display: flex;
            align-items: center;
            > .name {
              width: 110px;
              text-align: right;
              color: #00f2ff;
              flex-shrink: 0;
            }
            > .value {
              margin-right: 10px;
              padding: 4px 8px;
              line-height: 14px;
              border-radius: 2px;
              background-color: #0a2751;
            }
            .labels {
              display: flex;
              flex-wrap: wrap;
              > span {
                padding: 4px 8px;
                line-height: 14px;
                border-radius: 2px;
                background-color: #0a2751;
                margin: 5px 5px 0 0;
              }
            }
          }
          > .row_flex {
            display: flex;
            justify-content: space-between;
            > .row {
              width: 50%;
            }
            > .row:nth-child(1) > .value {
              margin: 0;
            }
          }
          > .each {
            border-top: 2px solid #0b2b59;
            .row {
              margin-top: 20px;
            }
          }
        }
        .projectAddress {
          height: 240px;
          padding: 0 10px;
          #map {
            height: calc(100% - 50px);
          }
          > .address {
            height: 50px;
            line-height: 50px;
            font-size: 18px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            > span:nth-child(1) {
              color: #00f2ff;
              font-size: 14px;
            }
          }
        }
      }
    }
  }
  > .center {
    width: 940px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    > .projectName {
      height: 160px;
      > .title {
        height: 22px;
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        > .name {
          margin: 0 15px;
        }
        > .left {
          width: 50px;
          height: 2px;
          background-color: #ffff00;
          position: relative;
          &::before {
            content: '';
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #ffff00;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
          }
        }
        > .right::before {
          left: 0;
        }
      }
      .content {
        height: calc(100% - 24px);
        padding-top: 25px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-evenly;
        text-align: center;
        > .each {
          min-width: 140px;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          position: relative;
          > .value {
            height: 82px;
            font-size: 22px;
            color: #ffff00;
            background: url('../../../public/img/center_top.png') no-repeat
              center/100% 100%;
            > .unit {
              font-size: 12px;
            }
          }
          #tzwcl_chart {
            width: 140%;
            height: 160px;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
          }
          > .name {
            color: #00f2ff;
            font-size: 16px;
            margin-top: 10px;
          }
          > .chartname {
            width: 100%;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            color: #00f2ff;
            font-size: 16px;
          }
        }
      }
    }
    > .centerBox {
      height: 200px;
      border: 1px dashed #00f2ff;
      padding: 30px 50px;
      box-sizing: border-box;
      > .center2 {
        margin-top: 45px;
        display: flex;
        justify-content: space-between;
        position: relative;
        padding-right: 5px;
        &::before {
          content: '';
          position: absolute;
          top: 30%;
          width: 94%;
          border-top: 6px dotted #00f2ff;
        }
        > .each {
          width: 14%;
          height: 80px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-evenly;
          border-radius: 5px;
          border: 1px solid #009bc3;
          box-shadow: inset 0 0 5px #083a7d;
          font-size: 16px;
          position: relative;
          z-index: 1;
          background-color: #081945;
          box-sizing: border-box;
          color: #7b929a;
          > i {
            font-size: 30px;
          }
          .el-icon-success {
            width: 20px;
            height: 20px;
            border-radius: 10px;
            background-color: #3cff36;
            position: absolute;
            top: -12px;
            right: -8px;
            //color: #3cff36;
            //font-size: 22px;
          }
          > .completeDate {
            width: 100%;
            text-align: center;
            position: absolute;
            top: -30px;
            left: 0;
            white-space: nowrap;
            color: #3cff36;
          }
        }
        > .each2 {
          color: white;
          > i {
            color: #00f2ff;
          }
        }
      }
    }
    > .yearInvestComplete {
      height: 428px;
      position: relative;
      > #yic_chart {
        height: calc(100% - 40px);
      }
    }
  }
  > .right {
    width: 450px;
    height: 100%;
    .otherInfo {
      height: 100%;
      .content {
        font-size: 16px !important;
        height: calc(100% - 40px);
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        .dangyuejihua {
          height: 100px;
          padding: 8px;
          box-sizing: border-box;
          .cont {
            width: 100%;
            height: 100%;
            padding: 5px 0;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            > .bottom {
              word-break: break-all;
              font-size: 12px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 4;
              -webkit-box-orient: vertical;
              text-align: justify;
              > span {
                color: #00f2ff;
                font-size: 14px;
              }
            }
            .row {
              display: flex;
              align-items: center;
              > .name {
                text-align: right;
                color: #00f2ff;
                flex-shrink: 0;
              }
              > .value {
                font-size: 12px;
                padding: 4px 8px;
                line-height: 12px;
                border-radius: 2px;
                background-color: #0a2751;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
          }
        }
        .xingXiangJinDu {
          height: 450px;
          padding: 8px;
          box-sizing: border-box;
          .cont {
            width: 100%;
            height: 100%;
            padding: 5px 0;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            > .top {
              display: flex;
              align-items: center;
              > .row {
                width: 50%;
                > .value {
                  color: #3bff0b;
                }
              }
            }
            > .bottom {
              word-break: break-all;
              font-size: 12px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 4;
              -webkit-box-orient: vertical;
              text-align: justify;
              > span {
                color: #00f2ff;
                font-size: 14px;
              }
            }
            .row {
              display: flex;
              align-items: center;
              > .name {
                text-align: right;
                color: #00f2ff;
                flex-shrink: 0;
              }
              > .value {
                font-size: 12px;
                padding: 4px 8px;
                line-height: 12px;
                border-radius: 2px;
                background-color: #0a2751;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
            img {
              display: block;
              width: 100%;
              max-height: 200px;
            }
          }
        }
        .yujingqingkuang {
          height: 180px;
          padding: 30px 0 0 80px;
          box-sizing: border-box;
          > .yjqk {
            height: 100%;
            > .title {
              width: 130px;
              height: 36px;
              line-height: 36px;
              text-align: center;
              color: #00f2ff;
              background: url('../../../public/img/liangdeng.png') no-repeat
                center/100% 100%;
            }
            > .cont {
              height: calc(100% - 36px);
              display: flex;
              flex-direction: column;
              justify-content: space-evenly;
              > .each {
                .title {
                  position: relative;
                  color: #00f2ff;
                  &::before {
                    content: '';
                    width: 12px;
                    height: 12px;
                    background-color: #fccf1b;
                    transform: translateY(-50%) rotate(45deg);
                    position: absolute;
                    left: -28px;
                    top: 50%;
                  }
                }
                > .value {
                  margin-top: 4px;
                  > span:first-child {
                    margin-right: 40px;
                  }
                  i {
                    font-size: 22px;
                    margin-right: 5px;
                  }
                }
              }
            }
            .ztz_zljwc {
              display: flex;
              > .each {
                width: 50%;
                padding-left: 20px;
                > .name {
                  position: relative;
                  &::before {
                    content: '';
                    width: 14px;
                    height: 14px;
                    background-color: #00f2ff;
                    transform: translateY(-50%) rotate(45deg);
                    position: absolute;
                    left: -28px;
                    top: 50%;
                  }
                }
                > .value {
                  font-size: 18px;
                  color: #00f2ff;
                  margin-top: 5px;
                  > .unit {
                    font-size: 12px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .node_progress {
    position: absolute;
    z-index: 1;
    right: 20px;
    top: 30px;
    cursor: pointer;
    padding: 3px 10px;
    background-color: #072353;
    border-radius: 3px;
    box-sizing: border-box;
    border: 1px solid #0d8a91;
    color: #00f2ff;
    &:hover {
      background-color: #153469;
    }
  }
  .el-icon-circle-close {
    position: absolute;
    left: 20px;
    top: 10px;
    z-index: 9999;
    font-size: 36px;
    cursor: pointer;
    animation: rotate 4s linear infinite;
    &:hover {
      color: #00f2ff;
      animation-play-state: paused;
    }
  }
}
/deep/.el-carousel__arrow {
  top: 65%;
}
@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}
</style>
